<template>
  <layout>
    <u-navbar title="开票记录" :background="{ 'background-image': 'linear-gradient(to right, #434AD8, #8E77F5)' }" :border-bottom="false" backIconColor="#fff" titleColor="#fff"></u-navbar>
    
    <view class="list mg-sm" v-if="listData.length">
      <view class="list-item pad-sm mg-b-sm" v-for="(item, index) in listData" :key="index">
        <view class="h-box justify-between">
          <view class="h-box">
            <image class="h-box mg-r-xs" style="width: 28rpx;height: 28rpx;" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_shijian.png"></image>
            <view>{{ formatCreateTime(item.createTime || 0) }}</view>
          </view>
          <view v-if="item.status == 1" style="color: red;">处理中</view>
          <view v-if="item.status == 2" style="color: green;">已发送至邮箱</view>
        </view>
        
        <view class="h-box">
          <view class="list-item-left">抬头类型：</view>
          <view class="list-item-right flex-extend" v-if="item.type === 'notCompany'">个人/非企业抬头</view>
          <view class="list-item-right flex-extend" v-if="item.type === 'company'">公司抬头</view>
        </view>
        <view class="h-box">
          <view class="list-item-left">发票抬头：</view>
          <view class="list-item-right flex-extend">{{ item.title }}</view>
        </view>
        <view class="h-box">
          <view class="list-item-left">发票内容：</view>
          <view class="list-item-right flex-extend">{{ item.text }}</view>
        </view>
        <view class="h-box">
          <view class="list-item-left">发票金额：</view>
          <view class="list-item-right flex-extend">￥{{ amountTofixed(item.amount) }}</view>
        </view>
        <view class="h-box" v-if="item.remark">
          <view class="list-item-left">更多信息：</view>
          <view class="list-item-right flex-extend">{{ item.remark }}</view>
        </view>
        <view class="h-box">
          <view class="list-item-left">邮箱：</view>
          <view class="list-item-right flex-extend">{{ item.email }}</view>
        </view>
        <view class="h-box">
          <view class="list-item-left">订单编号：</view>
          <view class="list-item-right flex-extend u-line-1">
            <view v-for="(item1, index1) in item.orderIdArr" :key="index1" class="h-box">
              <view class="flex-extend u-line-1">{{ item1 }}</view>
              <view class="list-item-right-copy" @click.stop="handleCopy(index, index1)">复制</view>
            </view>
          </view>
        </view>
      </view>
      
      <view class="h-fill">
        <uni-load-more :status="status"></uni-load-more>
      </view>
    </view>
    
    <view v-else style="margin-top: 40%;">
      <u-empty></u-empty>
    </view>
  </layout>
</template>

<script>
  const db = uniCloud.database()
  const dbCmd = db.command
  
  export default {
    name: 'invoice-record',
    data() {
      return {
        listData: [],
        pageNum: 0,
        pageSize: 10,
        total: 0,
        status: 'more'
      }
    },
    computed: {
      amountTofixed() {
        return amount => amount?.toFixed(2) || '0.00'
      },
      formatCreateTime() {
        return time => this.$moment(time).format("yyyy-MM-DD hh:mm")
      }
    },
    onReady() {
      this.getData()
    },
    onReachBottom() {
      if (this.total === this.listData.length) return
    	this.getData()
    },
    methods: {
      handleCopy(index, index1) {
        let value = this.listData[index].orderIdArr[index1]
      	uni.setClipboardData({
      		data: value,
      		success: function() {
      			uni.showToast({
      				title: "已复制",
      				icon: "none"
      			})
      		}
      	});
      },
      
      async getData() {
        uni.showLoading({ mask: true })
        if (['loading', 'noMore'].includes(this.status)) return
        this.status = 'loading'
        
        try{
          let res = await this.$dbHelper.getPage('t3ds-invoice-record', {
            showLoading: false,
            where: { userId: this.$store.state.userInfo._id },
            orderBy: 'createTime desc',
            pageNum: this.pageNum + 1
          })
          if (res.list.length) {
            this.pageNum += 1
            this.listData = this.listData.concat(res.list)
          }
          this.total = res?.total || 0
          this.status = this.listData.length < this.total ? 'more' : 'noMore'
        }catch(e){
          uni.hideLoading()
          console.log(e);
        }
        
        uni.hideLoading()
      }
    }
  }
</script>

<style>
  page {
    background-color: #F5F5F5;
  }
</style>

<style scoped lang="scss">
  .list {
    .list-item {
      background-color: white;
      border-radius: 20rpx;
      .list-item-left {
        width: 150rpx;
      }
      .list-item-right {
        text-align: right;
        .list-item-right-copy {
          width: 42rpx;
          font-size: 21rpx;
          color: #6667FF;
          margin-left: 20rpx;
          margin-right: 4rpx;
          white-space: nowrap;
        }
      }
    }
  }
</style>
